<template>
  <h3>鼠标也在页面的横纵坐标</h3>
  <h2>x:{{ x }} y:{{ y }}</h2>

  <h3 v-if="loading">正在加载中</h3>
  <h3 v-else-if="errorMsg">错误信息{{ errorMsg }}</h3>
  <ul v-else>
    <li>id:{{ data.id }}</li>
    <li>address:{{ data.address }}</li>
    <li>distance:{{ data.distance }}</li>
  </ul>
  <!-- 数组数据 -->
  <ul v-for="item in data" :key="item.id">
    <li>id:{{ data.id }}</li>
    <li>title:{{ data.title }}</li>
    <li>price:{{ data.price }}</li>
  </ul>
</template>
<script>
  import { defineComponent, watch} from 'vue';
  import useMousePosition from '../hooks/useMousePosition'
  import useRequest from '../hooks/useRequest'
  // 定义接口
  // interface AddressData{
  //   id:Number;
  //   address:String;
  //   distance:String
  // }
  export default defineComponent({
    name:'HookHanshu',
    // 需求1: 收集用户鼠标点击的页面坐标
    setup(){
      const {x,y}=useMousePosition()
      // 发送请求
      //获取对象数据
      const {loading,data,errorMsg}=useRequest('/data/address.json')
      // 获取数组数据
      // const {loading,data,errorMsg}=useRequest<AddressData>('/data/products.json')
      // watch(data,()=>{
      //   if(data.value){
      //     console.log(data.value.length);
      //   }
      // })
      return{
        x,
        y,
        loading,
        data,
        errorMsg
      }
    }
  })
</script>
<style scoped>
</style>